<template>
    <view class="goods-item" :class="[{ limit : type === 'limit'}]">
		<view class="img-box">
			<image class="image" :src="item.pic + '_300x300.jpg'" :lazy-load="true" @load="finishLoad"></image>
			
			<!-- 加载动效 -->
			<view class="loading" v-if="loading">
				<view class="load-item pink"></view>
				<view class="load-item red"></view>
				<view class="load-item orange"></view>
				<view class="load-item yellow"></view>
			</view>

			<!--排名-->
			<view class="goods-rank" v-if="type === 'default'">
				<template v-if="index < 3">
					<image :lazy-load="true" class="rank-one" :src="`https://onecode-zfx-one.oss-cn-shenzhen.aliyuncs.com/images/million_good_top${index + 1}.png`"></image>
				</template>
				<view class="rank-two" v-else-if="index > 2 && index < 10 && tabIndex === 0">
					<text>{{ index + 1 }}</text>
				</view>
			</view>
			
			<view class="limit-time" v-if="type === 'limit' && item.marketType === 1">限时抢购</view>
			<view class="limit-number" v-if="type === 'limit' && item.marketType !== 1">限量抢购</view>
			
			<!-- 已抢完 -->
			<view class="mask" v-if="isDisabled">
				<view class="circular-wrap">
					<view class="circular-inner">已抢完</view>
				</view>
			</view>
		</view>
		<view class="goods-content">
			<view class="top">
				<view class="goods-name">
					<!-- <text class="iconfont icon-tianmao" v-if="item.shoptype == 1"></text> -->
					<!-- <text class="iconfont icon-taobao2" v-else-if="item.shoptype == 0"></text> -->
					<!-- <text class="goods-item__title-tag" v-else-if="item.shoptype == 10">优选</text> -->
					{{ item.title }}
				</view>
				<view class="limit-time" v-if="type === 'limit' && item.marketType === 1">
					<view class="label">倒计时：</view>
					<count-down
					 	background-color="#FEF1E1"
					 	color="#875C23"
					 	borderColor="#FEF1E1"
					 	splitorColor="#875C23"
					 	:day="couponTime[0]"
					 	:hour="couponTime[1]"
					 	:minute="couponTime[2]"
					 	:second="couponTime[3]"
					 ></count-down>
				</view>
				<view class="limit-number" v-if="type === 'limit' && item.marketType !== 1">剩余数量：{{ item.surplus }}</view>
				<view class="goods-sale" v-if="type === 'default'">仅剩{{ item.sale | formatMyriadNum }}件</view>
			</view>
			<view class="bottom">
				<view class="goods-price">
					<view class="end-price">{{ hdyxRiskSetting.shareIconDisplay === 1 ? '补贴价' : '券后价' }}¥<text class="text">{{ item | now_price }}</text></view>
					<view class="old-price">¥{{ item.price }}</view>
				</view>
				<view class="btn-group">
					<view class="coupon">
						{{ item.couponMoney }}元
					</view>
					<view class="buy" :class="[{ disabled : isDisabled }]" @tap="buyProduct()">
						<view class="left">
							<text class="price" v-if="hdyxRiskSetting.shareIconDisplay === 1">{{ item.type === 0 ? item.mdMoney : item.tljMoney }}元</text>
							<text class="text" v-if="hdyxRiskSetting.shareIconDisplay === 1">{{ item.type === 0 ? '首单补贴' : '权益金' }}</text>
							<text class="text" v-if="hdyxRiskSetting.shareIconDisplay === 0">销量{{ item.sale | formatMyriadNum }}</text>
						</view>
						<view class="right">
							立即抢
						</view>
					</view>
				</view>
			</view>
			
			<!-- 已用补贴 -->
			<view class="has-used" v-if="item.hasBuy === 1"></view>
		</view>
    </view>
</template>

<script>
	import { mapGetters } from 'vuex';
	import moment from '@/utils/packges/moment';
	import CountDown from "@/components/uni/CountDown";
    export default {
        name: "GoodsItem",
		components: {
			CountDown
		},
        props: {
            millionItem: {
                type: Object,
                default: () => {
                    return {}
                }
            },
			index: {
				type: Number,
				default: () => {
					return 0
				}
			},
			tabIndex: {
				type: Number,
				default: () => {
					return 0
				}
			},
			type: {
				type: String,
				default: () => {
				    return 'default'
				}
			}
        },
		data() {
			return {
				loading: true,
				item: {},
				singleProductIds: uni.getStorageSync('singleProductIds') || [],
				couponTime: []
			}
		},
		computed: {
			...mapGetters(['conf', 'userInfo', 'hdyxRiskSetting']),
			isDisabled() {
				if (this.item.hasBuy === 1) {
					return false;
				}
				const isExist = this.singleProductIds.includes(this.item.id);

				return this.item.singleProduct === 1
						? isExist
								? this.item.receiveStatus > 0
								: false
						: this.item.receiveStatus > 0;
			}
		},
		created() {
			this.item = this.millionItem;

			if (this.type === 'limit' && this.item.marketType === 1) {
				// 计算优选好物剩余时间
				let endTime = moment(Number(this.item.endTime) * 1000).format('YYYY-MM-DD HH:mm:ss');
				let startTime = moment().format('YYYY-MM-DD HH:mm:ss');
				let daysLeft = moment(endTime).diff(startTime, 'days');
				let hoursLeft = moment(endTime).diff(startTime, 'hours') - daysLeft * 24;
				let minutesLeft =
						moment(endTime).diff(startTime, 'minutes') -
						daysLeft * 24 * 60 -
						hoursLeft * 60;
				let secondsLeft =
						moment(endTime).diff(startTime, 'seconds') -
						daysLeft * 24 * 60 * 60 -
						hoursLeft * 60 * 60 -
						minutesLeft * 60;
				this.couponTime = [daysLeft, hoursLeft, minutesLeft, secondsLeft];
			}
		},
		methods: {
			// 图片加载完成
			finishLoad() {
				this.loading = false;
			},
			// 商品购买
			buyProduct() {
				let that = this;
				if (this.userInfo.numToday <= 0) {
					uni.showToast({
						title: '您今日补贴金已用完',
						icon: 'none'
					});
					return false;
				}
				if (this.isDisabled) {
					return false;
				}
				uni.showLoading({
					title: '加载中...'
				});
				if (this.item.hasBuy === 1) {
					this.$emit('onCopySuccess', this.item.tkl);
					setTimeout(() => {
						uni.hideLoading();
					}, 2000)
				} else {
					delete this.item.app;
					this.$service.million.goods.dayGoodsBuy({
						...this.item,
						itemId: this.item.gid,
						sdkType: 'zfb',
						isBybt: true
					}).then(res => {
						uni.showToast({
							title: '已抢到权益，请尽快购买',
							icon: 'none'
						});
						this.$store.dispatch('getUserInfo');
						this.$emit('onCopySuccess', res, 'refresh');
						uni.hideLoading();
					}).catch(err => {
						if (this.item.singleProduct === 1) {
							this.item.receiveStatus = 1;
							this.item.surplus = 0;
							this.addSingleProduct();
						}
						if (err.message.includes('余额不足')) {
						    this.$emit('insBalance');
						}
						if (err.message.includes('已抢完')) {
						    this.item.receiveStatus = 1;
						    this.item.surplus = 0;
						} else if (err.message.includes('您已抢购该商品')) {
						    this.item.hasBuy = 1;
						}
						uni.showToast({
							title: err.message,
							icon: 'none'
						});
						uni.hideLoading();
					})
				}
				if (this.tabIndex === 0) {
					if (this.index < 5) {
						my.reportAnalytics('click_tuijiansp' + (this.index + 1), {
							desc: '点击抢推荐类目第' + this.toChineseNum(this.index + 1) + '个商品'
						});
					}
				}
			},
			// 记录已点击的单品
			addSingleProduct() {
				this.singleProductIds.push(this.item.id);
				uni.setStorageSync('singleProductIds', this.singleProductIds);
			}
		},
		filters: {
		    now_price({ endPrice, mdMoney, tljMoney, hzQuanOver }) {
		        return (
		            parseFloat(endPrice || 0) -
		            parseFloat(mdMoney || 0) -
		            parseFloat(tljMoney || 0) -
		            parseFloat(hzQuanOver || 0)
		        ).toFixed(2);
		    }
		},
    }
</script>

<style lang="scss" scoped>
.goods-item {
	width: 704rpx;
	height: 318rpx;
	box-sizing: border-box;
	padding: 16rpx;
	margin: 20rpx auto 0;
	border-radius: 16rpx;
	background: #fff;
	@include flexBox(center, center);
	&.limit {
		margin-top: 0;
	}
	.img-box {
		width: 284rpx;
		height: 284rpx;
		position: relative;
		margin-right: 18rpx;
		.loading {
			position: absolute;
			width: 100%;
			height: 100%;
			@include flexBox(center);
			.load-item {
				width: 20rpx;
				height: 100rpx;
				margin: 0 10rpx;
				border-radius: 50rpx;
				&.pink {
					background: #fb889b;
					animation: pink 0.8s infinite;
				}
				&.red {
					background: #fb8888;
					animation: red 0.8s infinite;
				}
				&.orange {
					background: #fba488;
					animation: orange 0.8s infinite;
				}
				&.yellow {
					background: #fbc188;
					animation: yellow 0.8s infinite;
				}
			}
		}
		.image {
			position: absolute;
			width: 100%;
			height: 100%;
			overflow: hidden;
			border-radius: 16rpx;
		}
		.goods-rank {
			position: absolute;
			left: 16rpx;
			top: 0;
			z-index: 8;
			.rank-one {
				width: 48rpx;
				height: 58rpx;
			}
			.rank-two {
				width: 44rpx;
				height: 44rpx;
				border-radius: 0 0 8rpx 8rpx;
				text-align: center;
				line-height: 44rpx;
				font-size: 28rpx;
				color: #fff;
				background: linear-gradient(to bottom, #FF404F, #F70114);
			}
		}
		.limit-time {
			position: absolute;
			left: 0;
			top: 0;
			padding: 6rpx 20rpx;
			font-size: 28rpx;
			color: #fff;
			border-radius: 0 16rpx 16rpx 0;
			background: linear-gradient(to right top, #FC5A57, #E72B27);
		}
		.limit-number {
			position: absolute;
			left: 0;
			top: 0;
			padding: 6rpx 20rpx;
			font-size: 28rpx;
			color: #fff;
			border-radius: 0 16rpx 16rpx 0;
			background: linear-gradient(to right top, #BB9DFD, #8557EA);
		}
		.mask {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 5;
			overflow: hidden;
			border-radius: 16rpx;
			background: rgba(0, 0, 0, 0.14);
			@include flexBox(center, center);
			.circular-wrap {
				width: 134rpx;
				height: 134rpx;
				border-radius: 50%;
				background: rgba(0, 0, 0, 0.3);
				transform: rotate(-24deg);
				@include flexBox(center, center);
				.circular-inner {
					width: 108rpx;
					height: 108rpx;
					border: 2rpx solid #fff;
					border-radius: 50%;
					font-size: 28rpx;
					color: #fff;
					@include flexBox(center, center);
				}
			}
		}
	}
	.goods-content {
		height: 100%;
		overflow-x: auto;
		flex: 1;
		position: relative;
		@include flexBox(space-between, null, column);
		.goods-name {
			font-size: 28rpx;
			color: #030303;
			margin-bottom: 10rpx;
			@include ellipsis(2);
		}
		.limit-time {
			font-size: 24rpx;
			color: #875C23;
			@include flexBox(flex-start, center);
		}
		.limit-number {
			font-size: 24rpx;
			color: #875C23;
			background: #FEF1E1;
			width: fit-content;
			padding: 2rpx 10rpx;
			border-radius: 4rpx;
		}
		.goods-sale {
			color: #666666;
			font-size: 24rpx;
		}
		.goods-price {
			color: #F70114;
			font-size: 28rpx;
			margin-bottom: 10rpx;
			@include flexBox(flex-start, center);
			.end-price {
				.text {
					font-size: 40rpx;
				}
			}
			.old-price {
				color: #B5B5B5;
				font-size: 24rpx;
				margin-left: 10rpx;
				text-decoration: line-through;
			}
		}
		.btn-group {
			width: 100%;
			@include flexBox(space-between);
			.coupon {
				width: 102rpx;
				height: 64rpx;
				background: url('https://onecode-zfx-one.oss-cn-shenzhen.aliyuncs.com/20200914/35e14130-f676-11ea-a7a4-e716e57a5e7b.png') no-repeat center center;
				background-size: 100% 100%;
				color: #fff;
				font-size: 26rpx;
				@include flexBox(center, flex-start);
			}
			.buy {
				width: 258rpx;
				height: 64rpx;
				background: url('https://onecode-zfx-one.oss-cn-shenzhen.aliyuncs.com/20200923/45ae2be0-fd43-11ea-800f-23e17d09e146.png') no-repeat center center;
				background-size: 100% 100%;
				@include flexBox(space-between)
				.left {
					width: 140rpx;
					color: #E8343D;
					line-height: 26rpx;
					@include flexBox(center, center, column);
					.price {
						font-size: 26rpx;
					}
					.text {
						font-size: 20rpx;
					}
				}
				.right {
					width: 110rpx;
					font-size: 26rpx;
					color: #fff;
					@include flexBox(center)
				}
				&.disabled {
					background: url('https://onecode-zfx-one.oss-cn-shenzhen.aliyuncs.com/20200923/e1bc0d70-fd45-11ea-8e62-ff42bdcf296a.png') no-repeat center center;
					background-size: 100% 100%;
					.left, .right {
						color: #8B8B8B;
					}
				}
			}
		}
		.has-used {
			width: 104rpx;
			height: 104rpx;
			background: url('https://onecode-zfx-one.oss-cn-shenzhen.aliyuncs.com/20200923/549086b0-fd45-11ea-800f-23e17d09e146.png') no-repeat center center;
			background-size: 100% 100%;
			position: absolute;
			right: 0;
			bottom: 120rpx;
		}
	}
}
@keyframes pink {
	0% {
		margin-top: -16rpx;
	}

	50% {
		margin-top: 16rpx;
	}

	100% {
		margin-top: -16rpx;
	}
}
@keyframes red {
	0% {
		margin-top: 16rpx;
	}

	50% {
		margin-top: -16rpx;
	}

	100% {
		margin-top: 16rpx;
	}
}
@keyframes orange {
	0% {
		margin-top: -16rpx;
	}

	50% {
		margin-top: 16rpx;
	}

	100% {
		margin-top: -16rpx;
	}
}
@keyframes yellow {
	0% {
		margin-top: 16rpx;
	}

	50% {
		margin-top: -16rpx;
	}

	100% {
		margin-top: 16rpx;
	}
}
</style>
